<template>
  <div style="padding: 10px">
    <div style="padding: 20px; display: flex; justify-content: flex-start">
      <img
        :src="imageIcon"
        style="width: 100px; border-radius: 50%; margin-right: 10px"
      />
      <span style="line-height: 100px">张小白</span>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="订单" name="1">
        <template #title>
          <div><van-icon name="orders-o" style="margin-right: 6px" />订单</div>
        </template>
        代码是写出来给人看的，附带能在机器上运行。
      </van-collapse-item>

      <van-collapse-item title="个人信息" name="2">
        技术无非就是那些开发它的人的共同灵魂。
        <template #title>
          <div>
            <van-icon name="user-o" style="margin-right: 6px" />个人信息
          </div>
        </template>
      </van-collapse-item>
      <van-collapse-item title="收货地址" name="3">
        <template #title>
          <div>
            <van-icon name="comment-o" style="margin-right: 6px" />收货地址
          </div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
      <van-collapse-item title="支付方式" name="3">
        <template #title>
          <div>
            <van-icon name="balance-pay" style="margin-right: 6px" />支付方式
          </div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
      <van-collapse-item title="卡券" name="3">
        <template #title>
          <div><van-icon name="ecard-pay" style="margin-right: 6px" />卡券</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
      <van-collapse-item title="消息" name="3">
        <template #title>
          <div><van-icon name="chat-o" style="margin-right: 6px" />消息</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
      <van-collapse-item title="帮助" name="3">
        <template #title>
          <div><van-icon name="fail" style="margin-right: 6px" />帮助</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
      <van-collapse-item title="关于" name="3">
        <template #title>
          <div><van-icon name="setting-o" style="margin-right: 6px" />关于</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import imageIcon from "../assets/user.webp";

let activeNames = reactive([]);
</script>
